<template>
  <div class="admin-container">
    <el-header class="header">
      <el-button type="danger" @click="handleLogout" style="float: right; margin-top: 10px;">退出登录</el-button>
    </el-header>
    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="用户管理" name="user">
        <UserManagement :key="'user'" />
      </el-tab-pane>
      <el-tab-pane label="医生管理" name="doctor">
        <DoctorManagement :key="'doctor'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserManagement from './components/UserManagement.vue'
import DoctorManagement from './components/DoctorManagement.vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const activeTab = ref('user')
const router = useRouter()

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    sessionStorage.removeItem('auth')
    router.push('/login')
    ElMessage({
      type: 'success',
      message: '退出登录成功'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消退出'
    });
  });
}
</script>

<style scoped>
.admin-container {
  padding: 20px;
}
.header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
}
</style>
